<template>
  <div class="login-body">
    <el-card shadow="never" class="box-card">
      <div class="form-container">
        <div class="title">欢迎进入 HgHivLnの博客</div>
        <div class="login-tab">
          <el-tabs
            v-model="activeName"
            :stretch="true"
          >
            <el-tab-pane label="登录" name="login">
              <el-form
                ref="form"
                :model="loginForm"
                size="small"
                label-width="0"
              >
                <el-form-item>
                  <el-input
                    v-model="loginForm.username"
                    placeholder="请输入用户名"
                  />
                </el-form-item>
                <el-form-item>
                  <el-input
                    v-model="loginForm.password"
                    show-password
                    placeholder="请输入密码"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="注册" name="register" style="margin-left:-20px">
              <el-form
                ref="form"
                :model="registerForm"
                size="small"
                label-width="80px"
              >
                <el-form-item label="用户名">
                  <el-input
                    v-model="registerForm.username"
                    placeholder="请输入用户名"
                  />
                </el-form-item>
                <el-form-item label="密　码">
                  <el-input
                    v-model="registerForm.password"
                    show-password
                    placeholder="请输入密码"
                  />
                </el-form-item>
                <el-form-item label="昵　称">
                  <el-input
                    v-model="registerForm.nickname"
                    placeholder="请输入昵称"
                  />
                </el-form-item>
                <el-form-item label="姓　名">
                  <el-input
                    v-model="registerForm.name"
                    placeholder="请输入姓名"
                  />
                </el-form-item>
                <el-form-item label="邮　箱">
                  <el-input
                    v-model="registerForm.userEmail"
                    placeholder="请输入邮箱"
                  />
                </el-form-item>
                <el-form-item label="性　别">
                  <el-radio-group v-model="registerForm.sex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 100%;margin-left:-53px" @click="register">注册</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { register } from '@/api/customer'
import md5 from 'js-md5'

export default {
  data() {
    return {
      activeName: 'login',
      loginForm: {},
      registerForm: {}
    }
  },
  methods: {
    // 注册
    register() {
      const user = { ...this.registerForm }
      user.password = md5(user.password)
      register(user).then(res => {
        this.$message.success(res.msg)
        this.activeName = 'login'
      })
    },
    // 登录
    login() {
      this.$store.dispatch('user/login', this.loginForm).then(res => {
        this.$router.push('/')
      })
    }
  }
}
</script>

<style scoped>
.login-body {
  background-image: url("/login-back.jpg");
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.box-card {
  width: 350px;
}

.form-container .title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}
</style>
